<template>
  <div class="main">
    <div class="btn-collapsed" :style="{
      width: collapsed ? '80px' : '260px',
      padding: collapsed ? '0px 28px' : '0 16px 0 24px',
    }">
      <li>
        <span v-if="!collapsed">{{ info[0].meta.resName }}</span>
        <MenuUnfoldOutlined v-if="collapsed" @click="collapsedClick" />
        <MenuFoldOutlined v-else @click="collapsedClick" />
      </li>
    </div>
    <a-menu v-model:selectedKeys="defaultSelectedKeys" theme="Dark" :inline-collapsed="collapsed" v-model:openKeys="openKeys" @click="handleClick" mode="inline" :style="{ height: 'calc(100% - 52px)', borderRight: 0 }">
      <div v-for="item in info[0].children" :key="item.paths">
        <sub-menu :menu-info="item" v-if="item.children && item.children[0].meta.resType != 'button'" />
        <a-menu-item :key="item.path" v-else>
          <template #icon>
            <span class="anticon iconBg"><i :class="['iconfont', item.meta.resIconKind]"></i></span>
          </template>
          <span>{{ item.meta.resName }}</span>
        </a-menu-item>
      </div>
    </a-menu>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import SubMenu from "./menuItem.vue";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";

const route = useRoute();
const router = useRouter();


let collapsed = ref(false);
// 展开的父菜单项
const openKeys = ref<string[]>(["/"]);

const defaultSelectedKeys = ref<string[]>([]);
type menuType = {
  path: string;
  paths: string;
  name: string;
  redirect: string;
  meta: {
    resName: string;
    resCheckIcon: string;
    resRange: string;
    resIconKind: string;
    resType: string;
    resIcon: string;
  };
  children?: menuType[];
};

const info = ref<menuType[]>([{
  "path": "/collaborativeWork",
  "paths": "/collaborativeWork",
  "name": "协同工作/collaborativeWork",
  "redirect": "collaborativeWork/collaborativeManagement/urbanManagementBureau",
  "meta": {
    "resName": "协同工作",
    "resCheckIcon": "",
    "resRange": "",
    "resIconKind": "",
    "resType": "menu",
    "resIcon": ""
  },
  "children": [
    {
      "path": "collaborativeManagement",
      "paths": "/collaborativeWork/collaborativeManagement",
      "name": "重点工作协同管理collaborativeManagement",
      "redirect": "",
      "meta": {
        "resName": "重点工作协同管理",
        "resCheckIcon": "",
        "resRange": "1",
        "resIconKind": "icon-jingfeishiyong",
        "resType": "menu",
        "resIcon": ""
      },
      "children": [
        {
          "path": "urbanManagementBureau",
          "paths": "/collaborativeWork/collaborativeManagement/urbanManagementBureau",
          "name": "重点工作管理（城管局）urbanManagementBureau",
          "redirect": "",
          "meta": {
            "resName": "重点工作管理（城管局）",
            "resCheckIcon": "",
            "resRange": "1",
            "resIconKind": "icon-quan",
            "resType": "",
            "resIcon": ""
          },
          "children": [{
            "path": "urbanManagementBureau",
            "paths": "/collaborativeWork/collaborativeManagement/urbanManagementBureau",
            "name": "重点工作管理1urbanManagementBureau",
            "redirect": "",
            "meta": {
              "resName": "重点工作管理1",
              "resCheckIcon": "",
              "resRange": "1",
              "resIconKind": "icon-quan",
              "resType": "",
              "resIcon": ""
            },

          }]
        },
        {
          "path": "entrustedUnit",
          "paths": "/collaborativeWork/collaborativeManagement/entrustedUnit",
          "name": "重点工作管理（同级委办单位）entrustedUnit",
          "redirect": "",
          "meta": {
            "resName": "重点工作管理（同级委办单位）",
            "resCheckIcon": "",
            "resRange": "1",
            "resIconKind": "icon-quan",
            "resType": "",
            "resIcon": ""
          },
        },
        {
          "path": "disposalSubmission",
          "paths": "/collaborativeWork/collaborativeManagement/disposalSubmission",
          "name": "重点工作处置报送disposalSubmission",
          "redirect": "",
          "meta": {
            "resName": "重点工作处置报送",
            "resCheckIcon": "",
            "resRange": "1",
            "resIconKind": "icon-quan",
            "resType": "",
            "resIcon": ""
          }
        }
      ]
    },
    {
      "path": "taskDistribution",
      "paths": "/collaborativeWork/taskDistribution",
      "name": "任务管理（派发人员）taskDistribution",
      "redirect": "",
      "meta": {
        "resName": "任务管理（派发人员）",
        "resCheckIcon": "",
        "resRange": "1",
        "resIconKind": "icon-faxiangongdan",
        "resType": "",
        "resIcon": ""
      },
      "children": [
        {
          "path": "distributionPersonnel",
          "paths": "/collaborativeWork/taskDistribution/distributionPersonnel",
          "name": "任务生成distributionPersonnel",
          "redirect": "",
          "meta": {
            "resName": "任务生成",
            "resCheckIcon": "",
            "resRange": "1",
            "resIconKind": "",
            "resType": "button",
            "resIcon": ""
          },

        },
        {
          "path": "superviseHandle",
          "paths": "/collaborativeWork/taskDistribution/superviseHandle",
          "name": "任务督办superviseHandle",
          "redirect": "",
          "meta": {
            "resName": "任务督办",
            "resCheckIcon": "",
            "resRange": "1",
            "resIconKind": "",
            "resType": "button",
            "resIcon": ""
          },

        },
      ]
    },
    {
      "path": "taskReceive",
      "paths": "/collaborativeWork/taskReceive",
      "name": "任务管理（接收人员）taskReceive",
      "redirect": "",
      "meta": {
        "resName": "任务管理（接收人员）",
        "resCheckIcon": "",
        "resRange": "1",
        "resIconKind": "icon-faxiangongdan",
        "resType": "",
        "resIcon": ""
      }
    },
    {
      "path": "statisticalReport",
      "paths": "/collaborativeWork/statisticalReport",
      "name": " 统计报表statisticalReport",
      "redirect": "",
      "meta": {
        "resName": " 统计报表",
        "resCheckIcon": "",
        "resRange": "1",
        "resIconKind": "icon-faxiangongdan",
        "resType": "",
        "resIcon": ""
      }
    }
  ]
}])


const collapsedClick = () => {
  collapsed.value = !collapsed.value;
};

type ItemType = {
  key: string,
  keyPath: string
}

const handleClick = (item: ItemType) => {
  if (route.path == item.key) {
    return;
  }




  router.push({ path: item.key });

}
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
}

.btn-collapsed {
  width: 100%;
  height: 52px;
  font-size: 16px;
  padding: 0 16px 0 24px;
  background-color: #fff;

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0.85);

    .anticon-menu-fold,
    .anticon-menu-unfold {
      cursor: pointer;
    }
  }
}

ul.ant-menu.ant-menu-root {
  width: 260px;
}

.ant-menu-inline-collapsed {
  width: 80px !important;
}

::v-deep .ant-menu-inline-collapsed .ant-menu-item {
  inset-inline-start: 0 !important;
  padding-inline: calc(50% - 12px) !important;
  text-overflow: clip !important;

  .ant-menu-title-content,
  .ant-menu-title-content i,
  .ant-menu-submenu-arrow {
    opacity: 0 !important;
  }
}

::v-deep
  .ant-menu-inline-collapsed
  .ant-menu-submenu
  > .ant-menu-submenu-title {
  inset-inline-start: 0 !important;
  padding-inline: calc(50% - 12px) !important;
  text-overflow: clip !important;

  .ant-menu-title-content,
  .ant-menu-title-content i,
  .ant-menu-submenu-arrow {
    opacity: 0 !important;
  }
}

::v-deep .iconfont {
  font-size: 18px;
}

@mixin color() {
  i,
  span {
    color: rgba(22, 119, 255, 1);
  }
}

::v-deep .ant-menu-item:hover {
  color: #1677ff !important;
}

::v-deep.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: rgba(230, 244, 255, 1);
}

::v-deep .ant-menu-item,
::v-deep .ant-menu-submenu-title {
  height: 52px !important;
  line-height: 60px !important;
  margin-top: 0;
  margin-bottom: 0;
}

::v-deep .ant-menu {
  .ant-menu-item-selected {
    @include color();
  }
}

.btn-box-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
  padding: 0 16px 0 24px;
  font-size: 16px;

  .icon-btn {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
  }
}

.anticon {
  color: rgba(0, 0, 0, 0.85);
  font-size: 18px;
}

::v-deep
  .ant-menu-root
  > div
  > div
  > .ant-menu-submenu
  > .ant-menu-submenu-title {
  //第一层
  .iconBg {
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    line-height: 26px;
  }
}

::v-deep .ant-menu-root > div > .ant-menu-submenu > .ant-menu-sub > div > li {
  //第二层
  .iconBg {
    .iconfont {
      font-size: 10px;
      margin-top: 5px;
      display: inline-block;
    }
  }
}

::v-deep
  .ant-menu-root
  > div
  > .ant-menu-submenu
  > .ant-menu-sub
  > div
  > .ant-menu-submenu
  > .ant-menu-sub
  > div {
  li {
    .anticon {
      display: none;
    }
  }
}
</style>
